<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-04-30 11:30:28
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-09-03 17:11:30
 * @Description: 
 * @FilePath: \parking-mini\src\pages\mine.vue
-->
<template>
    <div class="container">
        <!-- 背景 -->
        <div class="bg" :style="{ height: statusBarHeight + 180 + 'px' }"></div>
        <!-- 顶部状态栏 -->
        <div class="statusBar" :style="{ height: statusBarHeight + 'px' }"></div>
        <!-- 顶部导航栏 -->
        <div class="navBar" :style="{ height: 88 + 'rpx' }">金阳新城智慧停车</div>
        <!-- header -->
        <div class="header">
            <div class="avatar" :class="{ user: desPhone }"></div>
            <div class="phone" @click="getPhone">{{ desPhone || "未登录" }}</div>
        </div>
        <!-- 个人信息 -->
        <div class="info">
            <div class="title">我的服务</div>
            <div class="grids">
                <div class="grid" @click="link('/pages/order_list')">
                    <div class="grid-img" :style="{ backgroundImage: `url(${imgs.grid1})` }"></div>
                    <div class="grid-name">缴费记录</div>
                </div>
                <div class="grid" @click="link('/pages/numberplate')">
                    <div class="grid-img" :style="{ backgroundImage: `url(${imgs.grid2})` }"></div>
                    <div class="grid-name">车牌管理</div>
                </div>
                <div class="grid" @click="link('/pages/vip')">
                    <div class="grid-img" :style="{ backgroundImage: `url(${imgs.grid3})` }"></div>
                    <div class="grid-name">我的月卡</div>
                </div>
                <div class="grid" @click="toOrderSearch()">
                    <div class="grid-img" :style="{ backgroundImage: `url(${imgs.grid4})` }"></div>
                    <div class="grid-name">临停缴费</div>
                </div>
                <div class="grid" @click="call()">
                    <div class="grid-img" :style="{ backgroundImage: `url(${imgs.grid5})` }"></div>
                    <div class="grid-name">联系客服</div>
                </div>
            </div>
        </div>

        <!-- 获取手机号弹窗 -->
        <GetPhoneModal :visible="phoneVisible" @close="phoneVisible = false" @success="getPhoneSuccess"></GetPhoneModal>
    </div>
</template>
<script>
import GetPhoneModal from "../components/GetPhoneModal.vue";

const app = getApp();
export default {
    components: { GetPhoneModal },
    data() {
        return {
            phoneVisible: false,
            imgs: app.globalData.imgs,
            statusBarHeight: "",
            desPhone: "",
        };
    },
    onShareAppMessage() {},
    onLoad() {
        // 获取顶部安全区域
        wx.getSystemInfo({
            success: (res) => {
                this.statusBarHeight = res.statusBarHeight;
            },
        });
    },
    onShow() {
        this.getDesPhone();
    },
    methods: {
        call() {
            wx.makePhoneCall({
                phoneNumber: "0731-83212080",
            });
        },
        // 路由跳转
        link(url, params) {
            if (!this.desPhone) {
                uni.$u.route("/pages/login");
                return false;
            }
            uni.$u.route(url, params);
        },
        toOrderSearch() {
            uni.$u.route("/pages/order_search");
        },
        // 获取脱敏手机号
        getDesPhone() {
            let phone = wx.getStorageSync("parking_phone");
            if (phone) {
                let phoneArr = phone.split("");
                phoneArr[3] = "*";
                phoneArr[4] = "*";
                phoneArr[5] = "*";
                phoneArr[6] = "*";
                this.desPhone = phoneArr.join("");
            } else {
                this.desPhone = "";
            }
        },
        // 获取手机号
        getPhone() {
            if (this.desPhone) {
                wx.showModal({
                    title: "确定退出登录吗?",
                    content: `确定退出登录吗？`,
                    success: (res) => {
                        if (res.confirm) {
                            wx.removeStorageSync("parking_openid");
                            wx.removeStorageSync("parking_phone");
                            wx.removeStorageSync("temp_token");
                            wx.removeStorageSync("dada_token");
                            this.getDesPhone();
                        } else if (res.cancel) {
                            console.log("用户点击取消");
                        }
                    },
                });
            } else {
                uni.$u.route("/pages/login");
            }
        },
        // 获取手机号成功
        getPhoneSuccess() {
            this.getDesPhone();
            this.phoneVisible = false;
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    .bg {
        position: absolute;
        top: 0;
        width: 100%;
        background-image: linear-gradient(135deg, #4bd1a0, #18a86b);
    }
    .statusBar {
        position: relative;
        z-index: 2;
        width: 100%;
    }
    .navBar {
        position: relative;
        z-index: 2;
        width: 100%;
        font-size: 30rpx;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .header {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 50rpx 0 60rpx 32rpx;
        .avatar {
            width: 128rpx;
            height: 128rpx;
            border-radius: 50%;
            margin-right: 50rpx;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-color: #ccc;
            &.user {
                background-image: url("https://www.jfparking.com/wl/wlProfile/ad/2024/05/09/d41fe179-e834-43c8-88f9-6fd7a5c32183.jpg");
            }
        }
        .phone {
            font-weight: bold;
            color: #fff;
        }
    }
    .info {
        position: relative;
        z-index: 2;
        width: 686rpx;
        margin-left: 32rpx;
        background-color: #f8f8f8;
        border-radius: 24rpx;
        padding-top: 34rpx;
        padding-bottom: 20rpx;
        .title {
            font-size: 36rpx;
            line-height: 1;
            color: #000;
            font-weight: bold;
            margin-left: 30rpx;
            margin-bottom: 50rpx;
        }
        .grids {
            display: flex;
            flex-wrap: wrap;
            .grid {
                flex: none;
                width: 25%;
                margin-bottom: 30rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #262626;
                font-size: 24rpx;
                line-height: 1;
                .grid-img {
                    width: 52rpx;
                    height: 52rpx;
                    margin-bottom: 20rpx;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                }
            }
        }
    }
}
</style>
